<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../../../resource/css/niubility.css"/>
	<style>
		/* 设置饼状图，柱状图，居中 */
		/*.pie_zhu{
			width: 1000px;
			position: relative;  !*  iframe要设置相对定位  position: relative; *!
			left: 50%;
			margin-left: -500px;
			!*border: 1px solid red; 观察线*!
		}*/
	</style>
</head>
<body>
	  <!-- 饼状图的画布 -->
	  <div id="pie" style="height:300px;" class="pie_zhu"></div>
	  <!-- 柱状图的画布 -->
	  <div id="zhu" style="height:250px;"  class="pie_zhu"></div>

	  <script  src="../../../resource/js/echarts.common.min.js"></script>
	  <script type="text/javascript" src="../../../resource/js/jquery.min.js"></script>
	  <!-- 静态url路径 -->
	  <script type="text/javascript" src="../../../resource/js/static_url.js"></script>
	  <script type="text/javascript">
	  	//ajax这方面的请求
        $.ajax({
        	type:"get",
        	url:uri_chart,
        	async:true,
        	dataType:"json",
        	success:function(info){
                if(info.code != 0)
                {
                    alert('状态码不是0，数据请求错误');
                    return;
                }
                if(info.data == null)
                {
                    alert('数据格式错误');
                    return;
                }


                var infoData = info.data; //这个对象下面有 histogram，pieChart
                var bar = infoData.histogram;
                var pie = infoData.pieChart;
                var arrName = [];
                var arrValue = [];
                $.each(bar, function(index,value) {
                    arrName.push(value.name);
                    arrValue.push(value.value);
                });
                //将这个数组，传给“ 饼状图 ”
                pieOption(pie);
                //将数据传给柱状图，并调用该函数
                barOption(arrName,arrValue);
        	},
        	error:function(){
        		console.log('ajax请求失败');
        	}
        });
        
        //---------饼状图函数
	  	function pieOption(pie){
	  		//（1）基于准备好的DOM初始化init   echarts实例
		  	var bing = echarts.init(document.getElementById('pie'));
		  	
		  	//（2）将获得数据，放在饼状图里面
		  	var optionPie = {
		  		title: {
	                    text: '在用设备分析图',//标题文本内容
	                    textStyle: {//设置标题的文本样式
	                       // color: 'black'
	                    }
	                },
		  		visualMap: {
	                    // 不显示 visualMap 组件，只用于明暗度的映射
	                    show: false,
	                    // 映射的最小值为 80
	                    min: 80,
	                    // 映射的最大值为 600
	                    max: 600,
	                    inRange: { // 明暗度的范围是 0 到 1
	                    	colorLightness: [0, 1]
	                    }
	               },             
				//tooltip这个对象能，产生鼠标移动提示数据的功能
				tooltip : {
	            	trigger: 'item',
	            	formatter: "{a} <br/>{b} : {d}%"
	        	},
			    series :
			    [
			        {
				        name:'设备分布',
		                type:'pie',
		                clockwise:'true',
		                startAngle:'0',
		                radius : '60%',
		                center: ['50%', '50%'],
			            data:pie				            
			        }
			    ]
			};
			
			//（3）实例化显示。
			bing.setOption(optionPie);
	  	}
	  	
	  	
	  	//-----------柱状图
	  	function barOption(arrName,arrValue){
	  		// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('zhu'));
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '设备类别分析图'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {	            	
	                data: arrName        	
	            },
	            yAxis: {},
	            series: [{
	                name: '设备数据',
	                type: 'bar',
	                data: arrValue  
	            }]
	        };
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);          
	  	}
	  	     
	  </script>
</body>
</html>
